<template>
    <div class="layer" style="bottom: 100px;">
        <div class="layer-switch" :style="{ width: (!state.isShowSwitch ? '37px' : '100%') }">
            <div class="layer-switch-cen">
                <span id="layer-switch-btn" @click="state.isShowSwitch = !state.isShowSwitch;">
                    <el-icon v-if="state.isShowSwitch"><ele-DArrowRight /></el-icon>
                    <el-icon v-if="!state.isShowSwitch"><ele-DArrowLeft /></el-icon>
                </span>
                <i class="layer-text" @click="state.isShowSwitch = !state.isShowSwitch">底图切换</i>
                <div class="layer-switch-box">
                    <div id="layer-switch-box2"
                        :class="state.showMap ? 'layer-switch-box-item vector layer-switch-box-item-border2' : 'layer-switch-box-item vector layer-switch-box-item-border1'"
                        @click="SetShowMap(1);">
                        <!-- <div class="layer-switch-box-item-tick el-icon-check" style="display: none;"></div> -->
                        <el-icon v-if="state.showMap" class="godIconCheck"><ele-Check /></el-icon>
                        <div class="layer-switch-box-item-text">
                            天地图
                        </div>
                    </div>
                    <div id="layer-switch-box2"
                        :class="!state.showMap ? 'layer-switch-box-item tdt layer-switch-box-item-border2' : 'layer-switch-box-item tdt layer-switch-box-item-border1'"
                        @click="SetShowMap(2);">
                        <!-- <div class="layer-switch-box-item-tick el-icon-check" style="display: none;"></div> -->
                        <el-icon v-if="!state.showMap" class="godIconCheck"><ele-Check /></el-icon>
                        <div class="layer-switch-box-item-text">
                            影像图
                        </div>
                    </div>
                    <div id="layer-switch-box2"
                        :class="state.showSeaMap ? 'layer-switch-box-item hdt layer-switch-box-item-border2' : 'layer-switch-box-item hdt layer-switch-box-item-border1'"
                        @click="SetShowMap(3);">
                        <!-- <div class="layer-switch-box-item-tick el-icon-check" style="display: none;"></div> -->
                        <el-icon v-if="state.showSeaMap" class="godIconCheck"><ele-Check /></el-icon>
                        <div class="layer-switch-box-item-text">
                            海图
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup name="switchMap">
    import {reactive } from 'vue';
    import type { Map } from 'ol';

    const state = reactive({
        isShowSwitch: false,
        showMap:false,
        showSeaMap:true,
        map:null as Map | null,
    });

    /**
     * 底图切换按钮事件
     * @param index 
     */
    const SetShowMap = (index: number) => {
        switch (index) {
            case 1:
                state.showMap = true;
                setLayersVisible(false, [2, 3]);
                setLayersVisible(true, [0, 1]);
                break;
            case 2:
                state.showMap = false;
                setLayersVisible(false, [0, 1]);
                setLayersVisible(true, [2, 3]);
                break;
            case 3:
                state.showSeaMap = !state.showSeaMap;
                setLayersVisible(state.showSeaMap, [4,4]);
                break;
        }
    };


    /**
     * 设置图层显示
     * @param status 
     * @param tempLayerIndex 
     */
    const setLayersVisible = (status: boolean, tempLayerIndex: number[]) => {
        if (state.map == null) return;
        state.map?.getLayers().item(tempLayerIndex[0]).setVisible(status);
        state.map?.getLayers().item(tempLayerIndex[1]).setVisible(status);
    }

    const ShowSwitch = (map: any) => {
        state.map = map;
    };
    // 导出对象
    defineExpose({ ShowSwitch });
</script>

<style>
.layer {
    position: absolute;
    bottom: 100px;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    pointer-events: auto;
    z-index: 505;
}

.layer-switch {
    background: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
    border-radius: 4px !important;
    padding: 14px 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    overflow: hidden;
}

.layer-switch-cen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.layer-switch-btn {
    cursor: pointer;
}

.layer-text {
    font-style: normal;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    margin-right: 10px;
    cursor: pointer;
    letter-spacing: 6px;
}

.layer-switch-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.vector {
    background: url('/@/assets/images/vector.png') center center / 101% 101% no-repeat;
}

.tdt {
    background: url('/@/assets/images/tdt.jpg') center center / 101% 101% no-repeat;
}

.hdt {
    background: url('/@/assets/images/hdt.png') center center / 101% 101% no-repeat;
}

.layer-switch-box-item {
    width: 80px;
    height: 80px;
    border-radius: 4px !important;
    position: relative;
    margin-right: 14px;
    cursor: pointer;
}

.layer-switch-box-item-border2 {
    border: 1px solid #3281ff;
}

.layer-switch-box-item-border1 {
    border: 1px solid #fff;
}

.layer-switch-box-item-text {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 12px;
    line-height: 14px;
    padding: 5px;
    text-align: center;
}

.godIconCheck {
    width: 32px;
    height: 18px;
    background-color: #3281ff;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    border-radius: 0 4px 0 4px;
    position: absolute;
    right: -1px;
    top: 0;
}
</style>